<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开始学习THREEJS</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            position: relative;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="container" id="container">
    <canvas id="canvas"></canvas>
</div>
<script src="three/three.min.js"></script>
<script src="three/examples/js/libs/stats.min.js"></script>
<script src="three/examples/js/controls/OrbitControls.js"></script>
<script>
    var camera, scene, webglRender;
    var screen_width, screen_height, stats, container;
    var OrbitControls;

    var BoxGeometryMeshs = []//方块

    function initStata() {
        container = document.querySelector("#container")
        screen_width = window.innerWidth;
        screen_height = window.innerHeight;
        stats = new Stats()
    }

    function initCamera() {
        //PerspectiveCamera( fov, aspect, near, far)
//        @paramer fov  相机视锥体垂直视角
//        @paramer aspect  相机视锥体宽高比
//        @paramer near   相机视锥体近裁剪面
//        @paramer far  相机视锥体远裁剪面。
//        camera = new THREE.PerspectiveCamera(60, screen_width / screen_height, 1, 10000)

//        OrthographicCamera(left, right, top, bottom, near, far )
//       @paramer   left — 相机视椎体（Camera frustum）左面。
//       @paramer   right — 相机视椎体（Camera frustum）右面。
//       @paramer   top — 相机视椎体（Camera frustum）上面。
//       @paramer   bottom — 相机视椎体（Camera frustum）下面。
//       @paramer  near — 相机视椎体（Camera frustum）前面（靠近相机的这一面）。
//       @paramer   far — 相机视椎体（Camera frustum）后面（远离相机的这一面）。
        camera = new THREE.OrthographicCamera(screen_width / -2, screen_width / 2, screen_height / 2, screen_height / -2, 1, 10000)
        camera.position.z = 5000//(蓝色)
        camera.position.x = 0//(红色)
        camera.position.y = 0//(绿色)
//        camera.up.x = 0
//        camera.up.y = 1
//        camera.up.z = 0

        //设置相机聚焦的位置(其实就是确定一个方向)
        camera.lookAt(new THREE.Vector3(0, 0, 0))
        console.log(camera.getWorldDirection())
    }
    function initScene() {
        scene = new THREE.Scene()
    }
    function addLight() {
        //环境光
        var AmbientLight = new THREE.AmbientLight()
        scene.add(AmbientLight)

        // 创建一个点光源
        var pointLight =
            new THREE.PointLight(0xFFFFFF);
// 设置点光源的位置
        pointLight.position.x = -100;
        pointLight.position.y = -100;
        pointLight.position.z = -100;
// 将点光源加入场景
        scene.add(pointLight);
    }
    function addObj() {

        //方块
        var BoxGeometry = new THREE.CubeGeometry(10, 10, 10);
//
//        var geometry = new THREE.CylinderGeometry(100, 100, 100, 100);
//        var material = new THREE.MeshBasicMaterial({color: 0xffff00});
//        var cylinder = new THREE.Mesh(geometry, material);
////        cylinder.rotation.x = 75
//        scene.add(cylinder);

        for (var i = 0; i < 1000; i++) {
            if (i % 2) {
                var BoxGeometryMesh = new THREE.Mesh(BoxGeometry, new THREE.MeshBasicMaterial({color: 0xffffff}));
                BoxGeometryMesh.position.x = Math.random() * screen_width;
                BoxGeometryMesh.position.y = Math.random() * screen_height;
                BoxGeometryMesh.position.z = Math.random() * 10000;
                scene.add(BoxGeometryMesh);
                BoxGeometryMeshs.push(BoxGeometryMesh)
            } else {
                var BoxGeometryMesh = new THREE.Mesh(BoxGeometry, new THREE.MeshBasicMaterial({color: 0x000000}));
                BoxGeometryMesh.position.x = Math.random() * screen_width;
                BoxGeometryMesh.position.y = Math.random() * screen_height;
                BoxGeometryMesh.position.z = Math.random() * 10000;
                scene.add(BoxGeometryMesh);
                BoxGeometryMeshs.push(BoxGeometryMesh)
            }


//            switch (i) {
//                case 0:
//                    var BoxGeometryMesh = new THREE.Mesh(BoxGeometry, new THREE.MeshNormalMaterial());
//                    BoxGeometryMesh.position.x = 0;
//                    BoxGeometryMesh.position.z = -200;
//                    scene.add(BoxGeometryMesh);
//                    BoxGeometryMeshs.push(BoxGeometryMesh)
//                    break;
//                case 1:
//                    var BoxGeometryMesh = new THREE.Mesh(BoxGeometry, new THREE.MeshNormalMaterial());
//                    BoxGeometryMesh.position.x = 0;
//                    BoxGeometryMesh.position.z = 200;
//                    scene.add(BoxGeometryMesh);
//                    BoxGeometryMeshs.push(BoxGeometryMesh)
//
//                    break;
//                case 2:
//                    var BoxGeometryMesh = new THREE.Mesh(BoxGeometry, new THREE.MeshNormalMaterial());
//                    BoxGeometryMesh.position.x = 800;
//                    BoxGeometryMesh.position.z = -200;
//                    scene.add(BoxGeometryMesh);
//                    BoxGeometryMeshs.push(BoxGeometryMesh)
//
//                    break;
//                case 3:
//                    var BoxGeometryMesh = new THREE.Mesh(BoxGeometry, new THREE.MeshNormalMaterial());
//                    BoxGeometryMesh.position.x = 800;
//                    BoxGeometryMesh.position.z = 200;
//                    scene.add(BoxGeometryMesh);
//                    BoxGeometryMeshs.push(BoxGeometryMesh)
//
//                    break;
//            }
        }


    }
    function addText() {

        var loader = new THREE.FontLoader();
        loader.load('three/examples/fonts/optimer_bold.typeface.json', function (font) {
            var TextGeometry = new THREE.TextGeometry("Hellow Word", {
                "font": font,
                "size": 70,
                "height": 20,
                "bevelEnabled": true,
                "bevelSize": 2
            })
            var material = new THREE.MeshBasicMaterial({color: 0x000000});
            var text = new THREE.Mesh(TextGeometry, material)
            text.position.x = 500
            scene.add(text)
        })


    }
    function initThree() {
        webglRender = new THREE.WebGLRenderer({
            canvas: document.querySelector("#canvas"),
            alpha: true //true 表示透明
        })
        webglRender.setSize(screen_width, screen_height)
        webglRender.setClearColor(0x000000)
    }
    function animate() {
        requestAnimationFrame(animate)
        for (var i = 0; i < BoxGeometryMeshs.length; i++) {
            BoxGeometryMeshs[i].position.x = Math.random() * screen_width * (1 - Math.random() * 2);
            BoxGeometryMeshs[i].position.y = Math.random() * screen_height * (1 - Math.random() * 2);
            ;
            BoxGeometryMeshs[i].position.z = Math.random() * 10000 * (1 - Math.random() * 2);
            ;
        }
//        camera.position.x += 1;
        camera.rotation.y += 0.1*0.0001
        camera.rotation.z += 0.1*0.0001
//        camera.position.x +=1
//        camera.position.y +=1
//        camera.position.z +=1
//        var timer = Date.now() * 0.0001;
//        camera.position.x = Math.cos( timer ) * 800;
//        camera.position.z = Math.sin( timer ) * 800;
        webglRender.render(scene, camera)
        stats.update()
    }
    function startThree() {
        initStata()
        initCamera()
        initScene()
        addLight()
        addObj()
        addText()
        initThree()
        animate()
    }

    function windowResize() {
        window.addEventListener('resize', function () {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            webglRender.setSize(window.innerWidth, window.innerHeight);

        }, false);

    }
    console.log(BoxGeometryMeshs)
    startThree()
    windowResize()
    container.appendChild(stats.domElement)
    OrbitControls = new THREE.OrbitControls(camera)
    //添加坐标轴
//    var axes = new THREE.AxisHelper(2000);
//
//    scene.add(axes);

</script>
</body>
</html>